<template>
  <div class="list_container flex both-100">
    <Breadcrumb :title="pageTitle"/>
    <div class="content_container">
      <el-form ref="searchMap" class="serach_wrapper flex-space-between" :inline="true" :model="searchMap"
               @submit.native.prevent>
        <div class="search">
          <el-form-item prop="planName" size="small">
            <el-input v-model="searchMap.mapTitle" placeholder="请输入地图名称" clearable @clear="getList()"
                      @keyup.enter.native="getList()"/>
          </el-form-item>
          <el-form-item class="flex">
            <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
            <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
          </el-form-item>
        </div>
        <div class="edit flex">
          <el-button icon="el-icon-plus" class="btn_primary" @click="handleAdd()">
            新增
          </el-button>
          <el-button icon="el-icon-download" class="btn_primary" @click="handleExport()">
            导出
          </el-button>
        </div>
      </el-form>
      <div class="table_container">
        <el-table stripe v-loading="loading" :data="mapList" :height="winTableH">
          <el-table-column type="index" label="序号" header-align="center" align="center" width="80"></el-table-column>
          <el-table-column prop="mapTitle" label="地图名称" align="center"/>
          <el-table-column prop="mapUrl" label="地图服务器地址" align="center"/>
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <span type="text" class="tag_primary" size="small" @click="handleEdit(scope.row)">修改</span>
              <span type="text" class="tag_warning" size="small" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination v-if="total>0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize"
                  @change="getList"/>
    </div>
    <MapDialog ref="mapDialog" @replace="replace"></MapDialog>
  </div>
</template>

<script>
import {deleteMapInfo, getMapInfo, getMapInfoList} from "../api/mapInfo"
import MapDialog from "@/views/map/mapInfo/mapDialog.vue";

export default {
  components: {MapDialog},
  computed: {
    pageTitle() {
      return '地图服务'
    }
  },
  data() {
    return {
      // 搜索条件
      searchMap: {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数
        mapTitle: undefined
      },
      // 数据列表
      mapList: [],
      total: 0,
      loading: false,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true;
      const response = await getMapInfoList(this.searchMap)
      if (response.code === 200) {
        this.mapList = response.rows
        this.total = response.total
        this.loading = false
      }
    },
    // 查询
    handleSearch() {
      this.getList()
    },
    // 重置
    handleReset() {
      this.searchMap = {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数
        mapTitle: undefined
      }
      this.getList()
    },
    // 新增
    handleAdd() {
      this.$refs.mapDialog.show()
    },
    // 修改
    async handleEdit(row) {
      const mapId = row.mapId
      const response = await getMapInfo(mapId)
      this.$refs.mapDialog.show(response.data)
    },
    // 删除
    handleDelete(row) {
      const mapId = [row.mapId]
      this.$confirm('是否确认编号为"' + mapId + '"的数据项？').then(res => {
        return deleteMapInfo(mapId)
      }).then(() => {
        this.getList()
        this.$message.success('删除成功')
      })
    },
    // 导出
    handleExport() {
      this.download(
          '/business/mapInfo/export',
          {
            ...this.searchMap,
          },
          `地图服务${new Date().getTime()}.xlsx`
      );
    },
    // 确定返回数据
    replace() {
      console.log('replace')
      this.getList()
    },
  }
}
</script>

<style lang='less' scoped>

</style>